registerPaint(
  'transparent-grid', // 对应css写法
  class {
    static get inputProperties() {
      return ['--color1', '--color2', '--units'];
    }
    /**
     *
     * @param {PaintRenderingContext2D} context 是CanvasRenderingContext2D的子集api
     * @param {PaintSize} size size的大小受到background-size属性大小的影响
     * @param {*} properties
     */
    paint(context, size, properties) {
      // 下方是具体实现paint的代码
      //   const color1 = '#fff';
      //   const color2 = '#eee';
      //   const units = 8;
      var color1 = properties.get('--color1', '#fff').toString();
      var color2 = properties.get('--color2', '#eee').toString();
      // 格子尺寸
      var units = Number(properties.get('--units', '8'));

      console.log(size, properties);

      for (var x = 0; x < size.width; x += units) {
        for (var y = 0; y < size.height; y += units) {
          context.fillStyle = (x + y) % (units * 2) === 0 ? color1 : color2;
          context.fillRect(x, y, units, units);
        }
      }
    }
  }
);
